<template>
  <!-- 面包屑 -->
  <!-- <el-page-header> -->
    <!-- <template #breadcrumb> -->
      <el-breadcrumb-item v-for="(item,index) in tabs" :key="index" :to="item.path">{{ item.meta.title }}</el-breadcrumb-item>
    <!-- </template> -->
    <!-- <template #content>
      <span v-for="(item,index) in tabs" :key="index" :to="item.path"> {{ item.meta.title }} </span>
    </template> -->
  <!-- </el-page-header> -->
  
</template>

<script setup lang='ts'>

import { ref, watch, Ref } from 'vue';
import { useRoute, RouteLocationMatched } from 'vue-router'
const route = useRoute()
//    定义导航数据,设置类型，否则赋值会报错
const tabs: Ref<RouteLocationMatched[]> = ref([])

const getBreadCom = () => {
  let mached = route.matched.filter(item => item.meta.title)
  // console.log(route.matched, mached)
  // 第一个路径如果不是首页，需要在匹配路径前面拼接一个首页
  const first = mached[0]
  if (first.path != "/listView/home") {
    mached = [{ path: '/listView/home', meta: { title: '首页' } } as any].concat(mached)
  }
  //设置面包屑的数据
  tabs.value = mached
}

getBreadCom()
// 监听路径的改变,如果发生变化了，执行方法
watch(() => route.path, () => getBreadCom())


  // computed: {
  //   list () {
  //     return this.$
  //   }
  // },
  // mounted () {
  //   // console.log('this.$route.matched', this.$route.matched)
  // }
</script>
<style>
/* .el-page-header__breadcrumb{
  margin: 0;
  margin-top: 50px;
  width: 400px !important;
  display: flex;
}
.el-page-header__header{
  display: flex;

}
.el-page-header{
  display: flex;
  flex-direction: column;
}
.el-page-header__left{
  margin: 0;
  margin-top: 15px;
} */
</style>
